/*
  学习目标： 复用组件逻辑的三种方式 - 💥💥自定义hooks
  步骤：
     1. 自定义hooks函数内， 封装状态，封装修改状态的逻辑（方法）
     2. 返回状态， 返回修改的方法
  注意：
    1. hooks可以在内部调用其它的hooks
    2. 函数命名要use开头 + 驼峰写法
*/

import React from 'react';
import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Header></Header>
      <hr />
      <Main></Main>
    </div>
  );
}

function useMouse() {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => {
    setMouse({ x: e.clientX, y: e.clientY });
  };

  return {
    mouse,
    handleMouseMove,
  };
}

function Header() {
  const { mouse, handleMouseMove } = useMouse();

  return (
    <div>
      <h1 onMouseMove={handleMouseMove}>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main(params) {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <div>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>

      <button onMouseMove={handleMouseMove}>放我身上</button>
    </div>
  );
}
